<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>确认订单 - 校园二手市场</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", "Times New Roman", serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* 顶部导航栏 */
        .header {
            background-color: #2c3e50;
            color: white;
            padding: 25px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo h1 {
            font-size: 3rem;
            display: flex;
            align-items: center;
            font-weight: 700;
            min-width: 400px;
            letter-spacing: 2px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }

        .logo i.fa-recycle {
            font-size: 3rem;
            margin-right: 15px;
            color: #e74c3c;
        }

        .user-menu ul {
            display: flex;
            list-style: none;
        }

        .user-menu li {
            margin-left: 25px;
            min-width: 100px;
        }

        .user-menu a {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            padding: 8px 0;
        }

        /* 订单容器 */
        .order-container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }

        .order-title {
            font-size: 24px;
            color: #2c3e50;
        }

        .order-content {
            display: flex;
            gap: 30px;
        }

        .back-btn {
            background: #e74c3c;
            color: white;
            padding: 15px 20px;
            border-radius: 4px;
            text-decoration: none;
            transition: background 0.3s;
            gap: 5px;
        }

        .back-btn:hover {
            background: #c0392b;
        }


        /* 商品详情 */
        .product-section {
            flex: 1;
        }

        .product-image-large {
            width: 100%;
            height: 400px;
            object-fit: contain;
            border: 1px solid #eee;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .product-info {
            margin-bottom: 20px;
        }

        .product-title {
            font-size: 20px;
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .product-price {
            font-size: 24px;
            color: #e74c3c;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .product-desc {
            color: #555;
            line-height: 2.0em;
        }

        .seller-info {
            display: grid;
            gap: 10px;
            margin-top: 20px;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 8px;
        }

        /* 订单表单 */
        .order-form {
            flex: 1;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }

        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }

        .price-section {
            padding: 15px;
            background: #f0f0f0;
            border-radius: 8px;
            margin: 30px 0;
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .total-price {
            font-size: 20px;
            font-weight: bold;
            color: #e74c3c;
        }

        .btn-submit {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 15px;
            border-radius: 4px;
            font-size: 18px;
            cursor: pointer;
            width: 100%;
            transition: background 0.3s;
            margin-top: 10px;
        }

        .btn-submit:hover {
            background: #c0392b;
        }

        /* 模态框背景样式 */
        .feedback-modal-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: transparent;
            z-index: 1001;
        }

        /* 反馈模态框样式 */
        .feedback-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .feedback-modal-content {
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            min-width: 600px;
            min-height: 400px;
            width: 80vh;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 1002;
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
        }

        .feedback-icon-container {
            margin-bottom: 20px;
        }

        .feedback-icon {
            font-size: 80px;
        }

        .feedback-title {
            margin: 0 0 25px 0;
            font-size: 32px;
        }

        .feedback-message {
            margin: 0 0 35px 0;
            color: #555;
        }

        .feedback-actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .feedback-success {
            color: #4CAF50;
        }

        .feedback-error {
            color: #F44336;
        }

        .feedback-btn {
            padding: 15px 30px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 19px;
            transition: background-color 0.3s;
        }

        .feedback-primary-btn {
            background-color: #4CAF50;
            color: white;
        }

        .feedback-secondary-btn {
            background-color: #f1f1f1;
            color: #333;
        }

        .feedback-third—ary-btn {
            border-color: #95a5a6;
            color: #333;
        }

        .feedback-primary-btn:hover {
            background-color: #45a049;
        }

        .feedback-secondary-btn:hover {
            background-color: #ddd;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .feedback-modal[style*="display: flex"] .feedback-modal-content {
            animation: modalFadeIn 0.4s ease-out;
        }

        /* 页脚 */
        .footer {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 40px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-section h3 {
            color: white;
            margin-bottom: 15px;
            font-size: 1.2rem;
        }

        .footer-section p {
            margin-bottom: 10px;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section li {
            margin-bottom: 8px;
        }

        .footer-section a:hover {
            color: #e74c3c;
        }

        .footer-section i {
            margin-right: 8px;
            width: 20px;
            text-align: center;
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #34495e;
            font-size: 0.9rem;
            color: #bdc3c7;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .order-content {
                flex-direction: column;
            }

            .header .container {
                flex-direction: column;
            }

            .logo, .user-menu {
                width: 100%;
                margin-bottom: 15px;
            }

            .user-menu ul {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
<header class="header">
    <div class="container">
        <div class="logo">
            <a href="${pageContext.request.contextPath}/home"><h1><i class="fas fa-recycle"></i> 校园二手市场</h1></a>
        </div>
        <nav class="user-menu">
            <ul>
                <li>
                    <c:if test="${not empty user}">
                        <a href="${pageContext.request.contextPath}/userCenter"><i
                                class="fas fa-user"></i>&nbsp;${user.username}</a>
                    </c:if>
                    <c:if test="${empty user}">
                        <a href="${pageContext.request.contextPath}/login"><i class="fas fa-user"></i> 登录</a>
                    </c:if>
                </li>
                <li><a href="${pageContext.request.contextPath}/cart"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- 确认订单内容区 -->
<main class="main">
    <c:choose>
        <c:when test="${not empty param.action && param.action == 'editProduct'}">
            <div class="order-container">
                <div class="order-header">
                    <h1 class="order-title">修改订单信息</h1>
                    <a href="javascript:history.back()" class="back-btn"> <i class="fas fa-arrow-left"></i> 返回订单</a>
                </div>


                <div class="order-content">
                    <!-- 商品详情 -->
                    <div class="product-section">
                        <img src="${pageContext.request.contextPath}/productPictures/${productEdit.productId}/${productEdit.imageUrl}"
                             class="product-image-large"
                             onerror="this.src='${pageContext.request.contextPath}/default-product.webp'">

                        <div class="product-info">
                            <h2 class="product-title">${productEdit.title}</h2>
                            <div class="product-price">¥<fmt:formatNumber value="${productEdit.price}"
                                                                          pattern="0.00"/></div>
                            <div class="product-desc">
                                <p>${productEdit.description}</p>
                                <p><strong>商品等级：</strong>
                                    <c:choose>
                                        <c:when test="${productEdit.conditionLevel == 1}">全新</c:when>
                                        <c:when test="${productEdit.conditionLevel == 2}">几乎全新</c:when>
                                        <c:when test="${productEdit.conditionLevel == 3}">轻微使用痕迹</c:when>
                                        <c:when test="${productEdit.conditionLevel == 4}">明显使用痕迹</c:when>
                                        <c:when test="${productEdit.conditionLevel == 5}">需要维修</c:when>
                                    </c:choose>
                                </p>
                                <p><strong>发布时间：</strong><fmt:formatDate value="${productEdit.createTime}"
                                                                         pattern="yyyy-MM-dd"/></p>
                            </div>
                        </div>

                        <div class="seller-info">
                            <h3>卖家信息</h3>
                            <p><i class="fas fa-user"></i> ${sellerEdit.username}</p>
                            <p><i class="fas fa-phone"></i> ${sellerEdit.phone}</p>
                        </div>
                    </div>

                    <!-- 订单表单 -->
                    <div class="order-form">
                        <form id="orderEditForm" action="${pageContext.request.contextPath}/orderEdit" method="post">
                            <input type="hidden" name="orderIdEdit" value="${orderEdit.orderId}">

                            <div class="form-group">
                                <label class="form-label">收货人姓名</label>
                                <input type="text" name="receiverNameEdit" class="form-control"
                                       value="${buyerEdit.realName}" readonly required>
                            </div>

                            <div class="form-group">
                                <label class="form-label">联系电话</label>
                                <input type="tel" name="phoneEdit" class="form-control" value="${buyerEdit.phone}"
                                       required>
                            </div>

                            <div class="form-group">
                                <label class="form-label">详细地址</label>
                                <textarea name="editAddress" id="editAddress" class="form-control" rows="3"
                                          required>${buyerEdit.address}</textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label">留言给卖家（选填）</label>
                                <textarea name="editHintInfo" id="editHintInfo" class="form-control" rows="3"
                                          placeholder="例如：什么时候可以交易？">${orderEdit.hintInfo}</textarea>
                            </div>

                            <div class="price-section">
                                <div class="price-row">
                                    <span>商品价格：</span>
                                    <span>¥<fmt:formatNumber value="${productEdit.price}" pattern="0.00"/></span>
                                </div>
                                <div class="price-row total-price">
                                    <span>应付总额：</span>
                                    <span>¥<fmt:formatNumber value="${productEdit.price}" pattern="0.00"/></span>
                                </div>
                            </div>

                            <button type="submit" class="btn-submit">
                                <i class="fas fa-check-circle"></i> 修改订单
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </c:when>
        <c:otherwise>
            <div class="order-container">
                <div class="order-header">
                    <h1 class="order-title">确认订单信息</h1>
                    <a href="javascript:history.back()" class="back-btn"> <i class="fas fa-arrow-left"></i> 返回购物</a>
                </div>

                <div class="order-content">
                    <!-- 商品详情 -->
                    <div class="product-section">
                        <img src="${pageContext.request.contextPath}/productPictures/${product.productId}/${product.imageUrl}"
                             class="product-image-large"
                             onerror="this.src='${pageContext.request.contextPath}/default-product.webp'">

                        <div class="product-info">
                            <h2 class="product-title">${product.title}</h2>
                            <div class="product-price">¥<fmt:formatNumber value="${product.price}"
                                                                          pattern="0.00"/></div>
                            <div class="product-desc">
                                <p>${product.description}</p>
                                <p><strong>商品等级：</strong>
                                    <c:choose>
                                        <c:when test="${product.conditionLevel == 1}">全新</c:when>
                                        <c:when test="${product.conditionLevel == 2}">几乎全新</c:when>
                                        <c:when test="${product.conditionLevel == 3}">轻微使用痕迹</c:when>
                                        <c:when test="${product.conditionLevel == 4}">明显使用痕迹</c:when>
                                        <c:when test="${product.conditionLevel == 5}">需要维修</c:when>
                                    </c:choose>
                                </p>
                                <p><strong>发布时间：</strong><fmt:formatDate value="${product.createTime}"
                                                                         pattern="yyyy-MM-dd"/></p>
                            </div>
                        </div>

                        <div class="seller-info">
                            <h3>卖家信息</h3>
                            <p><i class="fas fa-user"></i> ${seller.username}</p>
                            <p><i class="fas fa-phone"></i> ${seller.phone}</p>
                        </div>
                    </div>

                    <!-- 订单表单 -->
                    <div class="order-form">
                        <form id="orderForm" action="${pageContext.request.contextPath}/confirmOrder" method="post">
                            <input type="hidden" name="productId" value="${product.productId}">

                            <div class="form-group">
                                <label class="form-label">收货人姓名</label>
                                <input type="text" name="receiverName" class="form-control" value="${buyer.username}"
                                       readonly required>
                            </div>

                            <div class="form-group">
                                <label class="form-label">联系电话</label>
                                <input type="tel" name="phone" class="form-control" pattern="1[3-9]\d{9}"
                                       title="请输入有效的手机号" value="${buyer.phone}" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label">详细地址</label>
                                <textarea name="address" id="address" class="form-control" rows="3"
                                          required>${buyer.address}</textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label">留言给卖家（选填）</label>
                                <textarea name="hintInfo" id="hintInfo" class="form-control" rows="3"
                                          placeholder="例如：什么时候可以交易？"></textarea>
                            </div>

                            <div class="price-section">
                                <div class="price-row">
                                    <span>商品价格：</span>
                                    <span>¥<fmt:formatNumber value="${product.price}" pattern="0.00"/></span>
                                </div>
                                <div class="price-row total-price">
                                    <span>应付总额：</span>
                                    <span>¥<fmt:formatNumber value="${product.price}" pattern="0.00"/></span>
                                </div>
                            </div>

                            <button type="submit" class="btn-submit">
                                <i class="fas fa-check-circle"></i> 提交订单
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </c:otherwise>
    </c:choose>

</main>

<!-- 反馈模态框 -->
<div id="orderFeedbackModal" class="feedback-modal">
    <div class="feedback-modal-backdrop"></div>
    <div class="feedback-modal-content">
        <div class="feedback-icon-container">
            <i id="feedbackIcon" class="fas feedback-icon"></i>
        </div>
        <h3 id="feedbackTitle" class="feedback-title"></h3>
        <div class="feedback-actions">
            <button id="primaryActionBtn" class="feedback-btn feedback-primary-btn"></button>
            <button id="secondaryActionBtn" class="feedback-btn feedback-secondary-btn"></button>
            <button id="thirdActionBtn" class="feedback-btn feedback-third—ary-btn"></button>
        </div>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>校园二手市场致力于为同学们提供安全、便捷的二手交易平台，促进资源循环利用。</p>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="${pageContext.request.contextPath}/home">首页</a></li>
                    <li><a href="${pageContext.request.contextPath}/productUpload">发布商品</a></li>
                    <li><a href="${pageContext.request.contextPath}/showAllOrder">我的订单</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <p><i class="fas fa-envelope"></i> 2424717883@qq.com</p>
                <p><i class="fas fa-phone"></i> 17868292884</p>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2025 CB 校园二手市场 版权所有</p>
        </div>
    </div>
</footer>

<script type="text/javascript">
    window.history.forward(1);
</script>
<script>
    // 页面加载时检查是否有反馈需要显示
    document.addEventListener('DOMContentLoaded', function () {
        const successParam = '${success}';
        const message = '${message}';

        // 只有当参数明确存在时才显示反馈
        if (successParam !== '' && message !== '') {
            const success = successParam === 'true';
            showOrderFeedback(success, message);
        }

        // 添加表单提交事件监听
        const orderForm = document.getElementById('orderForm');
        if (orderForm) {
            orderForm.addEventListener('submit', function (e) {
                // 检查表单是否有效
                if (!this.checkValidity()) {
                    e.preventDefault();
                    e.stopPropagation();
                    // 可以在这里添加自定义的错误提示
                    alert('请填写所有必填字段');
                    return false;
                }
                // 如果表单有效，继续正常提交
                return true;
            });
        }
    });


    // 显示反馈模态框
    function showOrderFeedback(isSuccess, message) {
        const modal = document.getElementById('orderFeedbackModal');
        const icon = document.getElementById('feedbackIcon');
        const title = document.getElementById('feedbackTitle');
        const primaryBtn = document.getElementById('primaryActionBtn');
        const secondaryBtn = document.getElementById('secondaryActionBtn');
        const thirdBtn = document.getElementById('thirdActionBtn');

        // 从URL获取orderId
        const urlParams = new URLSearchParams(window.location.search);
        const orderId = urlParams.get('orderId');

        const backdrop = modal.querySelector('.feedback-modal-backdrop');


        backdrop.onclick = function () {
            closeFeedbackModal();
            // 返回商品页面
            window.location.href = '${pageContext.request.contextPath}/showAllProducts';
        };

        if (isSuccess) {
            icon.className = 'fas fa-check-circle feedback-icon feedback-success';
            title.textContent = message;

            primaryBtn.textContent = '去支付';
            secondaryBtn.textContent = '查看订单';
            thirdBtn.textContent = '返回购物'

            primaryBtn.onclick = function () {
                window.location.href = '${pageContext.request.contextPath}/showAllOrder';
            };

            secondaryBtn.onclick = function () {
                window.location.href = '${pageContext.request.contextPath}/showAllOrder?action=detail&orderId=' + orderId;
            };

            thirdBtn.onclick = function () {
                window.location.href = '${pageContext.request.contextPath}/showAllProducts';
            }
        } else {
            closeFeedbackModal();
        }

        modal.style.display = 'flex';
    }


    // 关闭反馈模态框
    function closeFeedbackModal() {
        document.getElementById('orderFeedbackModal').style.display = 'none';
    }
</script>

</body>
</html>